<template>
  <!-- 增改用户弹框 -->
  <hcDialog
    dialogWidth="30%"
    :dialogTitle="options.type === 'add' ? '新增辅料' : '编辑辅料'"
    :isVisable="options.show"
    @closeDialog="closeFun"
    @openDialog="openFun"
  >
    <el-form
      ref="formRef"
      :model="form"
      label-width="6vw"
      status-icon
      :rules="rules"
      :validate-on-rule-change="false"
    >
      <el-form-item prop="product_id" label="生产料号">
        <el-select v-model="form.product_id">
          <el-option
            v-for="item of productArr"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="material_id" label="物料料号">
        <el-select v-model="form.material_id" @change="changeMaterial">
          <el-option
            v-for="item of materialArr"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="operation_id" label="工序名称">
        <el-select v-model="form.operation_id">
          <el-option
            v-for="item of operaArr"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item prop="part_number" label="辅料料号">
        <el-input v-model="form.part_number"> </el-input>
      </el-form-item> -->
      <el-form-item prop="quantity" label="辅料数量">
        <el-input v-model="form.quantity"> </el-input>
      </el-form-item>
      <el-form-item prop="material_units" :label="t('common.unit')">
        <el-input v-model="form.material_units"> </el-input>
      </el-form-item>

      <el-form-item>
        <div class="btns">
          <el-button type="primary" @click="saveDialog()">{{
            t("common.saveText")
          }}</el-button>
          <el-button @click="closeFun">{{ t("common.cancelText") }}</el-button>
        </div>
      </el-form-item>
    </el-form>
  </hcDialog>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import {
  AddAuxiliary,
  updateAuxiliary,
  getProduce,
  getMaterial,
} from "@/api/material";
import { getOperation } from "@/api/process";
import { useI18n } from "vue-i18n";
let { t } = useI18n();

const emit = defineEmits(["closeDialog"]);

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        show: false,
        type: "add", // 用于判断是编辑还是删除 add edit
        data: null, // 当前编辑的用户
      };
    },
  },
});

const formRef = ref();
const form = reactive({
  id: 0,
  material_id: "",
  product_id: "",
  operation_id: "",
  part_number: "",
  quantity: 0,
  material_units: "",
});
let productArr = ref([]);
let operaArr = ref([]);
let materialArr = ref([]);

const rules = {
  product_id: [
    { required: true, message: "请选择生产料号", trigger: "change" },
  ],
  material_id: [
    { required: true, message: "请选择物料料号", trigger: "change" },
  ],
  operation_id: [{ required: true, message: "请选择工序", trigger: "change" }],
  // part_number: [{ required: true, message: "请输入辅料料号", trigger: "blur" }],
};

function saveDialog() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res = "";
      if (props.options.type === "edit") {
        res = await updateAuxiliary(form);
      } else {
        res = await AddAuxiliary(form);
      }
      if (res) {
        ElMessage.success("保存成功");
        emit("closeDialog", true);
      } else {
        ElMessage.error("保存失败");
      }
    }
  });
}

// 关闭弹框
const closeFun = () => {
  formRef.value?.resetFields();
  emit("closeDialog");
};

function openFun() {
  if (props.options.type === "edit") {
    for (let key in form) {
      form[key] = props.options.data[key];
    }
  }
}
async function getAllProduct() {
  let res = await getProduce();
  productArr.value =
    res?.items
      ?.filter((item) => item.enabled)
      ?.map((item) => {
        return {
          label: item.product_number,
          value: item.id,
        };
      }) ?? [];
}
async function getAllMaterial() {
  let res = await getMaterial();
  materialArr.value =
    res?.items
      ?.filter((item) => item.enabled)
      ?.map((item) => {
        return {
          label: item.material_name,
          value: item.id,
        };
      }) ?? [];
}
async function getAllOpera() {
  let res = await getOperation();
  operaArr.value =
    res?.items
      ?.filter((item) => item.enabled)
      ?.map((item) => {
        return {
          label: item.operation_code,
          value: item.id,
        };
      }) ?? [];
}

function changeMaterial(val) {
  form.part_number = val;
}

onMounted(() => {
  getAllProduct();
  getAllOpera();
  getAllMaterial();
});
</script>
<style lang="scss" scoped></style>
